<template>
  <div class="cloudbase-status-page">
    <h1>CloudBase 连接诊断</h1>
    <p class="description">
      此页面用于诊断和解决与腾讯云CloudBase的连接问题。
      如果您遇到"授权失败"或"Connection closed"等错误，可以使用此工具进行诊断。
    </p>
    
    <CloudBaseStatus />
    
    <div class="help-section">
      <h2>常见问题解决方案</h2>
      
      <div class="help-item">
        <h3>1. 环境ID配置错误</h3>
        <p>请确保您已在 <code>src/utils/cloudbase.js</code> 文件中正确配置了环境ID。</p>
        <pre><code>// 云开发环境ID - 请替换为您的实际环境ID
const ENV_ID = 'your-actual-env-id';</code></pre>
      </div>
      
      <div class="help-item">
        <h3>2. 网络连接问题</h3>
        <p>确保您的网络连接稳定，并且可以访问腾讯云服务。</p>
        <ul>
          <li>检查您的网络连接</li>
          <li>确认防火墙或代理设置不会阻止连接</li>
          <li>尝试使用不同的网络环境</li>
        </ul>
      </div>
      
      <div class="help-item">
        <h3>3. 浏览器缓存问题</h3>
        <p>有时浏览器缓存可能导致连接问题。尝试清除浏览器缓存后重试：</p>
        <ol>
          <li>打开浏览器设置</li>
          <li>找到"清除浏览数据"选项</li>
          <li>选择"缓存的图片和文件"</li>
          <li>点击"清除数据"</li>
          <li>刷新页面</li>
        </ol>
      </div>
      
      <div class="help-item">
        <h3>4. CloudBase服务状态</h3>
        <p>检查腾讯云CloudBase服务是否正常运行：</p>
        <ul>
          <li>登录<a href="https://console.cloud.tencent.com/tcb" target="_blank">腾讯云控制台</a></li>
          <li>查看您的CloudBase环境状态</li>
          <li>确认服务未欠费或被停用</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import CloudBaseStatus from '../components/CloudBaseStatus.vue';

export default {
  name: 'CloudBaseStatusPage',
  components: {
    CloudBaseStatus
  }
};
</script>

<style scoped>
.cloudbase-status-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.description {
  text-align: center;
  margin-bottom: 30px;
  color: #666;
  line-height: 1.6;
}

.help-section {
  margin-top: 40px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.help-section h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.help-item {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.help-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.help-item h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.help-item p {
  margin-bottom: 10px;
  line-height: 1.6;
}

.help-item ul, .help-item ol {
  padding-left: 20px;
  margin-bottom: 10px;
}

.help-item li {
  margin-bottom: 5px;
}

code {
  background-color: #f0f0f0;
  padding: 2px 5px;
  border-radius: 3px;
  font-family: monospace;
}

pre {
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 10px 0;
}

a {
  color: #3498db;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>